<template>
  <div id="login">
    <div class="loginConbox">
      <div class="header">
      </div>
      <div class="loginBox">
        <div class="loginCon">
          <el-card shadow="always" class="login-module" v-if="smdl">
            <div slot="header" class="clearfix formTitlt">
              <span>登陆</span>
            </div>
            <el-form :model="loginForm" status-icon label-width="100px" class="demo-ruleForm">
              <el-form-item>
                <el-input type="text" v-model="loginForm.userName" auto-complete="off" placeholder="请输入登录账号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input type="password" v-model="loginForm.password" auto-complete="off"
                          placeholder="请输入登录密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="subBtn" type="primary" @click="submitForm">登录</el-button>
              </el-form-item>
              <p class="smalltxt">
                <router-link class="a" to="#">忘记密码</router-link>
                <router-link class="a" to="#">忘记会员名</router-link>
                <router-link class="a" to="#">免费注册</router-link>
              </p>
            </el-form>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Login from '../../api/apis/login.js'

  export default {
    data() {
      return {
        smdl: true,
        loginForm: {
          userName: "",
          password: ""
        }
      }
    },
    methods: {
      submitForm() {
        if (this.loginForm.userName === "" || this.loginForm.password === "") {
          this.$message({
            showClose: true,
            message: "账号或密码不能为空",
            type: "error"
          })
          return false
        } else {
          Login.fetchLogin(this.loginForm)
            .then(result => {
              if (result.code === 200) {
                this.$store.dispatch("setToken", result.data).then(() => {
                  this.$router.push("/")
                }).catch(res => {
                  this.$message({
                    showClose: true,
                    message: res,
                    type: "error"
                  })
                })
              } else {
                this.$message.error(result.msg)
              }
            }).catch(error => {
            this.$message.error(error.msg)
          })
        }
      }
    }
  }
</script>
<style lang="scss">
  #login {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .header {
      height: 60px;
      position: relative;

      .logo {
        margin-left: 30px;
        width: 500px;
        float: left;
        height: 40px;
        padding-top: 10px;

        img {
          height: 100%;
        }
      }
    }

    .loginBox {
      background: url("../../assets/backgImg.png") #fff;
      background-repeat: no-repeat;

      .iconcolor {
        color: #409EFF;
      }

      padding: 74px 0 118px;

      .loginCon {
        width: 990px;
        margin: auto;
        position: relative;
        height: 388px;

        .el-card__header {
          border-bottom: 0px;
        }

        .title {
          font-size: 36px;
          font-weight: 600;
          color: #ffffff;
          width: 500px;
          float: left;
          margin-top: 0px;

          &:first-child {
            font-size: 34px;
            margin-top: 50px;
            margin-bottom: 30px;
          }
        }

        .login-module {
          width: 380px;
          height: 325px;
          margin-top: 60px;
          border: none;
          position: absolute;
          right: 0;

          .formTitlt {
            font-size: 18px;
            font-weight: 400;

            .titIconbox {
              float: right;

              .pointer {
                cursor: pointer;
              }
            }
          }

          .smalltxt {
            text-align: right;

            .a {
              text-decoration: none;
              color: #999999;
              font-size: 12px;
              margin-left: 8px;
            }
          }
        }

        .el-form-item__content {
          margin-left: 0px !important;

          .subBtn {
            width: 100%;
          }
        }
      }

      .el-input__inner, .el-button, .el-card, .el-message {
        border-radius: 0px !important;
      }

      .el-form-item__content .ico {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 999;
        width: 40px;
        height: 39px;
        text-align: center;
        border-right: 1px solid #ccc;
      }

      .ewmbox {
        width: 100%;
        height: 240px;
        margin-top: -25px;

        .ewm {
          width: 140px;
          height: 140px;
          margin: 20px auto;

          p {
            font-size: 12px;
            padding-left: 40px;
            margin: 0;
          }
        }

        .ewmicon {
          width: 140px;
          margin: 20px auto 0;

          .iconfont {
            float: left;
          }

          p {
            font-size: 12px;
            padding-left: 40px;
            margin: 0;
          }
        }
      }
    }
  }
</style>
